<template>
    <div>

        <el-row>
            <!-- 添加 -->
        <el-button type="text" @click="dialogFormVisible1 = true">
            <el-button type="primary" round>添加员工</el-button>
        </el-button>

        <el-dialog title="" :visible.sync="dialogFormVisible1">
        <el-form :model="form">
            <el-form-item label="员工名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" ></el-input>
            </el-form-item>
            <el-form-item label="员工性别" :label-width="formLabelWidth">
            <el-input v-model="form.sex" autocomplete="off" ></el-input>
            </el-form-item>
            <el-form-item label="员工手机号" :label-width="formLabelWidth">
            <el-input v-model="form.phone" autocomplete="off" ></el-input>
            </el-form-item>

            <el-select v-model="form.dep" placeholder="请选择部门" >
                <el-option :label= "item.name" :value="item.id" v-for="item in depList" :key="item.id"></el-option>
            </el-select>
            <el-select v-model="form.duty" placeholder="请选择职责" >
                <el-option :label= "item.name" :value="item.id" v-for="item in dutyList" :key="item.id"></el-option>
            </el-select>


        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible1 = false">取 消</el-button>
            <el-button type="primary" @click="add()" v-model="dialogFormVisible1">确 定</el-button>
        </div>
        </el-dialog>


            <!-- 修改 -->
            <!-- <el-input placeholder="请输入部门编号" v-model="input1">
                <template slot="prepend">更新部门</template>
            </el-input> -->

        <el-button type="text" @click="dialogFormVisible2 = true">
            <el-button type="primary" round>修改员工</el-button>
        </el-button>

        <el-dialog title="" :visible.sync="dialogFormVisible2">
        <el-form :model="form">
            <el-form-item label="员工编号" :label-width="formLabelWidth">
            <el-input v-model="form.id" autocomplete="off" ></el-input>
            </el-form-item>

            <el-form-item label="员工名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" ></el-input>
            </el-form-item>
            <el-form-item label="员工性别" :label-width="formLabelWidth">
            <el-input v-model="form.sex" autocomplete="off" ></el-input>
            </el-form-item>
            <el-form-item label="员工手机号" :label-width="formLabelWidth">
            <el-input v-model="form.phone" autocomplete="off" ></el-input>
            </el-form-item>

            <el-select v-model="form.dep" placeholder="请选择部门" >
                <el-option :label= "item.name" :value="item.id" v-for="item in depList" :key="item.id"></el-option>
            </el-select>
            <el-select v-model="form.duty" placeholder="请选择职责" >
                <el-option :label= "item.name" :value="item.id" v-for="item in dutyList" :key="item.id"></el-option>
            </el-select>

            
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible2 = false">取 消</el-button>
            <el-button type="primary" @click="update()" v-model="dialogFormVisible2">确 定</el-button>
        </div>
        </el-dialog>       

        </el-row>  



        <!-- 删除 -->
        <el-button type="text" @click="dialogFormVisible = true">
            <el-button type="primary" round >删除员工</el-button>
        </el-button>

        <el-dialog title="" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="编号" :label-width="formLabelWidth">
            <el-input v-model="form.id" autocomplete="off" ></el-input>
            </el-form-item>
            
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="remove()" v-model="dialogFormVisible">确 定</el-button>
        </div>
        </el-dialog>

    </div>
</template>

<script>
import { del, get, post, put } from '../../utils/request';
export default {
    data(){
        return{
            input1:'',
            labelPosition: 'right',

            dialogFormVisible1: false, // 添加
            dialogFormVisible: false, // 删除
            dialogFormVisible2: false, // 修改
            form: {
                name: '',
                delivery: false,
                type: [],
                id:'',
                sex:'',
                phone:'',
                dep:'',
                duty:'',
            },
            formLabelWidth: '120px',
            depList:[], // 部门信息
            dutyList:[], // 职责信息
            StaffList:[],
    
        };
    },
    methods:{
        // 删除员工
        remove(){
            del("/v1/workers/staff/"+(this.form.id)+'/')
            .then((res) => {
                console.log(this.form.name)
                console.log("删除员工信息成功", res)
                this.dialogFormVisible = false
            }).catch((err) => {
                console.log(err)
            });
        },
        // 添加员工信息
        add(){
            post("/v1/workers/staff/",{name:this.form.name,sex:this.form.sex,phone:this.form.phone,dep:this.form.dep,duty:this.form.duty})
            .then((res) => {
                console.log("添加员工信息成功", res)
                this.dialogFormVisible1 = false
            }).catch((err) => {
                console.log(err)
            });
        },
        // 修改员工信息
        update(){
            put("/v1/workers/staff/"+ this.form.id + '/', {name:this.form.name,sex:this.form.sex, phone:this.form.phone,
            dep:this.form.dep,duty:this.form.duty})
            .then((res) => {
                console.log("修改员工信息成功", res)
                this.dialogFormVisible2 = false
            }).catch((err) => {
                console.log(err)
            });
        },
        // 获取部门信息
        getDep(){
            get("/v1/workers/department/")
            .then((res) => {
                console.log("获取部门信息成功", res)
                this.depList = res.data
            }).catch((err) => {
                console.log(err)
            });
        },
        // 获取职责信息
        getDuty(){
            get("/v1/workers/duty/")
            .then((res) => {
                console.log("获取职责信息成功", res)
                this.dutyList = res.data
            }).catch((err) => {
                console.log(err)
            });
        },
        getStaff(){
            get("/v1/workers/staff/")
            .then((res)=>{
                console.log("获取员工成功",res)
                this.getStaff= res.data
            }).catch((err)=>{
                console.log(err)
            })
        }
    },
    // 挂载之后
    mounted(){
        this.getDep();
        this.getDuty();
        this.getStaff();
    }

}
</script>

<style>

</style>